<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        #div1{text-align: center;width: 400px;}
        #div1 button{margin: 20px;margin: 10px;width: 100px;height: 30px;margin-bottom: 0;transition: .5s;}
        #div1 .active{background: orangered;color: white;}
        #div1 div{display: none;width: 400px;border: 1px black solid;}
    </style>
    <script>
        function TabSwitch(id){
            var node = document.getElementById(id);
            this.btns = node.getElementsByTagName('button');
            this.divs = node.getElementsByTagName('div');
            var _this = this;
            for(var i = 0;i < this.btns.length;i++){
                this.btns[i].index = i;
                this.btns[i].onclick = function(){
                    _this.tab(this);
                }
            }
        }
        //添加方法
        TabSwitch.prototype.tab = function(btn){
            //清除样式
            for(var i = 0;i < this.btns.length;i++){
                this.btns[i].className = '';
                this.divs[i].style.display = 'none';
            }
            //获取当前的按钮
            btn.className = 'active';
            this.divs[btn.index].style.display = 'block';
        }
        window.onload = function(){
            new TabSwitch("div1");
        }
    </script>
</head>
<body>
    <div id="div1">
        <button class="active">HTML5</button>
        <button>Python</button>
        <button>Java</button>
    <div style="display: block;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente reprehenderit sequi quia minus animi praesentium ratione aperiam voluptates. 
            Ipsa similique illum numquam quos alias perferendis! Inventore nulla est itaque commodi?</div>
    <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos veritatis ab natus. At tempore atque ea modi totam consequuntur facere quaerat distinctio maiores iste quos, 
            accusamus possimus. Expedita, maiores praesentium.</div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla quae inventore dolor assumenda voluptate quis eius iure necessitatibus consequatur 
            fugiat ipsum fuga recusandae quod ad consectetur qui, at, animi ullam!</div>
    </div>
</body>
</html>